<script>
import { httpRequest } from "../../utils/http";
import btnModule from "../../components/index/btnModule.vue";
import drawQrcode from "../../utils/weapp.qrcode.esm.js";
export default {
  components: {
    btnModule: btnModule,
  },
  data() {
    return {
      shopId: "",
      id: -1,
      questList: [],
      videoList: [],
      src: "",
      width: 0,
      height: 0,
      url: "",
      videoId: "",
      stay: -1,
      videoId1:'',
      pushList:[],
      questName:'',
      i:-1
    };
  },
  onLoad(e) {
    this.shopId = e.id;
    this.$refs.quest.open("bottom");
    this.getQuest();
  },
  onShow() {
    this.getQuest()
    this.pushList=[]
    this.i = -1
  },
  methods: {
    async getVideo() {
      const res = await httpRequest("/api/videoListByTaskId", "POST", {
        taskId: this.id,
      });
      console.log(res);
      this.videoList = res.data.videoList;
      console.log(this.videoList);
      this.pushList = this.videoList.filter(e=>e.whetherWhether==2)
    },
    async getQuest() {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      const res = await httpRequest("/api/taskListByShopId", "POST", {
        shopId: this.shopId,
      });
      uni.hideLoading()
      this.questList = res.data;
      if(!this.questList.length){
        return uni.showToast({
        title: '暂无任务',
        icon: 'none'
      })
      }
    },
    changeQuest(e) {
      const index = Number(e.detail.value)
      this.i = index
      this.id = this.questList[index].id;
      this.questName = this.questList[index].taskName
      this.getVideo()
    },
    verify() {
      console.log(this.pushList);
      if(this.pushList.length==0)return uni.showToast({title:'没有未发布视频',icon:'none'})
      this.videoId1 = this.pushList[0].videoId
      // this.publish(this.videoId1)
      uni.navigateTo({ url: `/pageA/index/publish?item=${JSON.stringify(this.pushList[0])}` })
    },
   async change(){
 const res = await httpRequest('/api/videoWhetherWhether','POST',{
        taskId:this.id,
        videoId:this.videoId1
      })
      console.log(res);
      if(res.data==null){
        uni.showToast({title:'没有更多视频了',icon:'none'})
        return
      }
      this.videoId1 = res.data.videoId
      // this.publish(this.videoId1)
      // uni.navigateTo({ url: `/pageA/index/publish?item=${this.pushList[0]}` })
    },
    async publish(id) {
      //loading
      uni.showLoading({
        title: "正在生成二维码",
        mask: false,
      });
      const res = await httpRequest("/api/uploadH5", "POST", { videoId: id });
      console.log(res);
      const video = res.data.video.videoUrl;
      const title = res.data.video.title;
      const poi = res.data.video.poiId;
      // const hashTags = res.data.video.label.split("#");
      const nonce_str = res.data.str;
      const timestamp = res.data.time;
      const signature = res.data.qian;
      const position = res.data.address;
      this.url = `snssdk1128://openplatform/share?client_key=awib1ol4e2732l27&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&share_type=h5&video_path=${video}&share_to_publish=1&title=${
        title ? title : ""
      }`;
      // if (poi) {
      // } else {
      //   this.url = `snssdk1128://openplatform/share?client_key=awib1ol4e2732l27&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&share_type=h5&video_path=${video}&share_to_publish=1&hashtag_list=${
      //     hashTags.length ? JSON.stringify(hashTags) : []
      //   }&title=${title ? title : ""}`;
      // }
      //二维码
      // 提取查询参数部分
      const queryString = this.url.split("?")[1];
      // 分割查询参数字符串为键值对数组
      const paramsArray = queryString.split("&");
      // 对每个查询参数进行编码
      const encodedParamsArray = paramsArray.map((param) => {
        const [key, value] = param.split("=");
        const encodedValue = encodeURIComponent(value);
        return `${key}=${encodedValue}`;
      });

      // 构造编码后的查询参数字符串
      const encodedQueryString = encodedParamsArray.join("&");

      // 构造编码后的 URL
      const encodedUrl = this.url.split("?")[0] + "?" + encodedQueryString;
      console.log(encodedUrl);
      uni
        .createSelectorQuery()
        .select("#canvas")
        .boundingClientRect((data) => {
          console.log("获取到canvas元素的布局信息：", data);
          this.width = data.width;
          this.height = data.height;
          drawQrcode({
          width: this.width, // 必须，二维码宽度，与canvas的width保持一致
          height: this.height, // 必须，二维码高度，与canvas的height保持一致
          canvasId: "myQrcode",
          background: "#ffffff", //	非必须，二维码背景颜色，默认值白色
          foreground: "#000000", // 非必须，二维码前景色，默认值黑色 	'#000000'
          // ctx: wx.createCanvasContext('myQrcode'), // 非必须，绘图上下文，可通过 wx.createCanvasContext('canvasId') 获取，v1.0.0+版本支持
          text: encodedUrl, // 必须，二维码内容
        });
        console.log('画完了');
        setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: "myQrcode",
          success: async(res) => {
            console.log(res.tempFilePath);
            
            const {data} =await uni.uploadFile({
				// url: 'https://www.diandianyouke.cn:8081/api/uploadErWeiMa',
				url: 'https://www.diandianyouke.cn:8081/api/uploadErWeiMa',
				filePath: res.tempFilePath,
				name: 'ewm',
				formData: {
					businessId:uni.getStorageSync('business').businessId
				},	
			})
			
			    console.log(JSON.parse(data).data);
					this.src = JSON.parse(data).data
          uni.hideLoading();
          this.$refs.quest.close();
          },
        });
        
        this.videoId1 = id
      }, 3000);
        })
        .exec();
    },
    goBack(){
      uni.navigateBack({ delta: 1 })
    }
  },
};
</script>

<template>
  <view class="page">
    <view class="erweima" v-if="false">
      <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 28rpx;">
        <view class="name">{{ questName }}</view>
        <view class="count">视频</view>
      </view>
      <image
        class="bgi"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/erWeiMa.png"
        mode=""
      />
      <!-- <image
        class="close"
        @click="popupClose()"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_hygbi.png"
        mode=""
      /> -->
      <view class="center">
        <image
          v-if="src"
          :src="src"
          @click="toggleImg"
          style="width: 480rpx; height: 480rpx; margin-bottom: 14rpx"
        />
        <text>扫描二维码就可以发布视频</text>
      </view>
    </view>
    <canvas
      style="width: 480rpx; height: 480rpx; margin: 0 auto; top: -99999px"
      id="canvas"
      canvas-id="myQrcode"
    ></canvas>
  </view>
  <btn-module message="已发布,换一个" @customClick="change" />

  <uni-popup ref="quest" :mask-click="false">
    <view class="popup-content">
      <view class="close">
        <image
        @click="goBack"
          class="close-btn"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        选择剪辑任务
      </view>
      <view class="bottom">
        <radio-group @change="changeQuest">
          <label class="item" v-for="(item, index) in questList" :key="index">
            <radio color="rgb(142,84,244)" :checked="i==index" :value="index" />
            <view class="right">
              <view style="font-size: 32rpx; color: rgb(48, 49, 51)">{{
                item.taskName
              }}</view>
              <view style="font-size: 28rpx; color: rgb(144, 147, 153)"
                >未发布视频<text
                  style="font-weight: 700; color: rgb(142, 84, 244); margin-right: 12rpx"
                  >{{ item.whetherWhether2 }}</text
                ></view
              >
            </view>
          </label>
        </radio-group>
      </view>
      <btn-module message="确认" @customClick="verify" />
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.erweima {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 630rpx;
  height: 900rpx;
  margin: 185rpx 0 0 60rpx;
  z-index: 1;
  // background: url('https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/erWeiMa.png') no-repeat;
  // background-size: contain;
  .name{
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12rpx;

  }
  .count{
    font-size: 30rpx;
    color: #fff;
  }
  .bgi {
    position: absolute;
    top: 0;
    left: 0;
    width: 630rpx;
    height: 900rpx;
    z-index: -999;
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 510rpx;
    height: 530rpx;
    padding: 30rpx;
    background-color: #fff;
    font-size: 24rpx;
    color: rgb(69, 70, 74);
    text-align: center;
    border-radius: 24rpx;
  }
  .close {
    position: absolute;
    top: -88rpx;
    right: 0;
    width: 88rpx;
    height: 88rpx;
  }
}
.popup-content {
  width: 100%;
  height: 1082rpx;
  border-radius: 32rpx 32rpx 0 0;

  background-color: #fff;
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .bottom {
    padding: 30rpx;
    box-sizing: border-box;
    width: 100%;
    height: 974rpx;
    overflow-y: scroll;
    padding-bottom: 200rpx;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30rpx;
        box-sizing: border-box;
        width: 618rpx;
        height: 168rpx;
        background-color: rgb(249, 249, 249);
        border-radius: 16rpx;
      }
    }
  }
}
</style>
